import { createElement } from '../utils/dom-helper';
import { ZTable } from '../cors/table';
import { MergeCellPlugin } from '../pugins/merge-cell.plugin';
import { ExecuteRecord } from '../cors/execute-record';
import { fromEvent, Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import './tools.less';
import { ToolsBar } from './tools-bar/tools-bar';
import { start as ColorPanelDom } from './color-panel-dom';
import { ColorPicker } from './tools-bar/component/color-picker';
export function createTools(tableIntance: ZTable):any {
    // let toolsInstance =  new Tools(tableIntance);
    let toolsInstance = new ToolsBar(tableIntance);
    let temp = document.querySelector('.tools');
    temp.appendChild(toolsInstance.container);
    var event = document.createEvent("HTMLEvents");
    event.initEvent("resize", true, true);
    window.dispatchEvent(event);
    // let color = document.createElement('canvas') as HTMLCanvasElement;
    // color.height = 100;
    // color.width = 100;
    // color.setAttribute('style', `
    //     border: 1px solid black; 
    //     width: 200px; 
    //     height: 200px; 
    //     display: block; 
    //     position: absolute;
    //     z-index: 10000;
    //     background-color: #ffffff;
    //     top: calc(50% - 100px);
    //     left: calc(50% - 100px);
    // `);
    // document.querySelector('body').appendChild(color);
    // let ctx: CanvasRenderingContext2D = color.getContext('2d');
    // let imageData = ctx.getImageData(0, 0, color.width, color.height);
    // let referenceRgb = {r: 10, g: 255, b: 14}
    // for(let i = 0; i < color.height; i++) {
    //     let per = i /  color.height;
    //     let t =  Math.floor(per * 255);
    //     let t1 = {r: 255 - t, g: 255 - t, b: 255 - t};
    //     let t2 = {
    //         r: Math.floor(referenceRgb.r - per * referenceRgb.r),
    //         g: Math.floor(referenceRgb.g - per * referenceRgb.g),
    //         b: Math.floor(referenceRgb.b - per * referenceRgb.b),
    //     }
    //     for(let j = 0; j < color.width; j++) {
    //         let p2 = j / color.width;
    //         let r = t1.r - (t1.r - t2.r) * p2;
    //         let g = t1.g - (t1.g - t2.g) * p2;
    //         let b = t1.b - (t1.b - t2.b) * p2;
    //         let index = (j + i * color.width) * 4;
    //         imageData.data[index + 0] = r;
    //         imageData.data[index + 1] = g;
    //         imageData.data[index + 2] = b;
    //         imageData.data[index + 3] = 255;
    //     }
    // }
    // ctx.putImageData(imageData, 0, 0);
    // ColorPanelDom();
    // let colorPicker = new ColorPicker();
    // let testContainer = document.createElement('div');
    // testContainer.className = 'test-container';
    // document.querySelector('body').appendChild(testContainer);
    // testContainer.appendChild(colorPicker.getContainerDom());
    return null;
}